<template>
 <transition name="slide">
 	<music-list :rank='rank' :songs='songs' :title="title" :bg-image="bgImage"></music-list>
 </transition>
</template>

<script type="text/ecmascript-6">
import musicList from 'components/music-list/music-list'
import {mapGetters} from 'vuex';
import {getMusiclist} from 'api/rank';
import {ERR_OK} from 'api/config';
import {createSong} from 'common/js/song'

export default{
  name:'',
    data(){ return{
    	songs:[],
    	rank:true
    }},
  computed:{
  	...mapGetters([
  		'topList'
  		]),
  	title(){
  		return this.topList.topTitle
  	},
  	bgImage(){
  	if(this.songs.length){
  		return this.songs[0].image
  	}
  	return ''
  	},
  },
  methods:{
 _getMusicList(){
 	if(!this.topList.id){
 		this.$router.push('/rank')
 	}
getMusiclist(this.topList.id).then((res)=>{
	if(res.code===ERR_OK){
		this.songs=this._dealData(res.songlist)
	}
})
  	},
  	_dealData(list){
  		let ret=[];
  		list.forEach((item)=>{
  			const musicData=item.data;
  			if(musicData.songid&&musicData.albumid){
  				ret.push(createSong(musicData))
  			}
  		});
  		return ret
  	}
  },
  created(){
  	this._getMusicList()
  },
  components:{musicList}
}
</script>

<style rel="stylesheet" lang="less">

</style>
